<!-- 教师管理 -->

<template>
  <div>
    <div class="header-menu">
      <div style="width: 60%;display: flex;">
        <el-input
            placeholder="搜索讲师"
            v-model="keyword"
            @clear="inputListener"
            clearable
        >
        </el-input>
        <el-button
            slot="append"
            type="primary"
            icon="Search"
            @click="searchTeacher"
        >搜索
        </el-button>
      </div>
      <el-button type="primary" @click="addTeacher" class="addbtn">添加讲师</el-button>
    </div>
    <!-- 讲师列表 -->
    <el-table :data="teacherData" size="mini" :stripe="true" :highlight-current-row="true" style="height: 600px;">
      <el-table-column label="序号" type="selection"></el-table-column>
      <el-table-column prop="teacherNo" label="编号" fixed width="100"></el-table-column>
      <el-table-column prop="username" label="用户名" fixed width="100"></el-table-column>
      <el-table-column prop="realname" label="姓名" fixed width="100"></el-table-column>
      <el-table-column prop="jobtitle" label="职称" fixed width="100"></el-table-column>
      <el-table-column prop="teach" label="学科" fixed width="80"></el-table-column>
      <el-table-column prop="age" label="年龄" fixed width="50"></el-table-column>
      <el-table-column prop="telephone" label="电话" fixed width="100"></el-table-column>
      <el-table-column prop="email" label="邮件" fixed width="150"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <!--      <el-table-column prop="license" label="证件照">-->
      <!--        <template #default="scope">-->
      <!--          <el-image-->
      <!--            v-if="scope.row.license != null"-->
      <!--            fit="contain"-->
      <!--            style="width: 50px; height: 20px"-->
      <!--            :src="scope.row.license"-->
      <!--            :preview-src-list="scope.row.license.split('#')"-->
      <!--          ></el-image>-->
      <!--          <el-upload-->
      <!--            v-else-->
      <!--            :action="'http://localhost:8080/teacher/upload/' + scope.row.id"-->
      <!--            :on-success="handleUploadSuccess"-->
      <!--          >-->
      <!--            <i class="el-icon-upload2" style="cursor: pointer"></i>-->
      <!--          </el-upload>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column prop="operation" label="操作">
        <template #default="scope">
          <el-button
              type="danger"
              size="mini"
              @click="deleteById(scope.$index, scope.row)"
          >删除
          </el-button
          >
          <el-button
              type="primary"
              size="mini"
              @click="editById(scope.$index, scope.row)"
          >编辑
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出表单编辑讲师 -->
    <el-dialog title="编辑讲师" v-model="visibleForm">
      <el-form
          :model="editFormData"
          label-position="left"
          label-width="80px"
          :rules="addTeacherRules"
      >
        <el-form-item label="编号" prop="teacherNo">
          <el-input
              v-model="editFormData.teacherNo"
              autocomplete="off"
              disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="username">
          <el-input
              v-model="editFormData.username"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input
              v-model="editFormData.realname"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="职称" prop="jobtitle">
          <el-input
              v-model="editFormData.jobtitle"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="科目" prop="teach">
          <el-input v-model="editFormData.teach" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="telephone">
          <el-input
              v-model="editFormData.telephone"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="email">
          <el-input v-model="editFormData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input
              v-model="editFormData.address"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="editFormData.age" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleForm = false">取 消</el-button>
        <el-button type="primary" @click="commit()">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 弹出表单添加讲师 -->
    <el-dialog title="添加讲师" v-model="visibleAddForm">
      <el-form
          ref="addTeacherFormRef"
          :model="addTeacherForm"
          label-position="left"
          label-width="80px"
          :rules="addTeacherRules"
      >
        <el-form-item label="编号" prop="teacherNo">
          <el-input
              v-model="addTeacherForm.teacherNo"
              autocomplete="off"
              disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="username">
          <el-input
              v-model="addTeacherForm.username"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input
              v-model="addTeacherForm.realname"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="职称" prop="jobtitle">
          <el-input
              v-model="addTeacherForm.jobtitle"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="科目" prop="teach">
          <el-input
              v-model="addTeacherForm.teach"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="telephone">
          <el-input
              v-model="addTeacherForm.telephone"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="email">
          <el-input v-model="addTeacherForm.email"
                    autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input
              v-model="addTeacherForm.address"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="addTeacherForm.age" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleAddForm = false">取 消</el-button>
        <el-button type="primary" @click="addCommit()">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 上一页，当前页，下一页 -->
    <div class="footer-button">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, getCurrentInstance} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';

const {proxy} = getCurrentInstance();
const store = useStore();
const router = useRouter();

const keyword = ref('');
const teacherData = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const visibleForm = ref(false);
const visibleAddForm = ref(false);
const editFormData = ref([]);
const addTeacherForm = ref({
  teacherNo: '',
  username: '',
  realname: '',
  jobtitle: '',
  email: '',
  teach: '',
  telephone: '',
  address: '',
  age: '',
});
const addTeacherRules = ref({
  username: [
    {required: true, message: "请输入昵称", trigger: "blur"},
    {
      min: 2,
      max: 12,
      message: "长度在 2 到 12 个字符",
      trigger: "blur",
    },
  ],
  realname: [
    {required: true, message: "请输入真实姓名", trigger: "blur"},
  ],
  jobtitle: [{required: true, message: "请输入职称", trigger: "blur"}],
  teach: [{required: true, message: "请输入教授科目", trigger: "blur"}],
  telephone: [
    {required: true, message: "请输入手机号码", trigger: "blur"},
  ],
  email: [{required: true, message: "请输入邮件", trigger: "blur"}],
  address: [{required: true, message: "请输入地址", trigger: "blur"}],
  age: [{required: true, message: "请输入年龄", trigger: "blur"}],
});

onMounted(() => {
  allTeacher();
});

const inputListener = () => {
  allTeacher();
}

// 在弹出添加表单之前从后台获取讲师的编号
const addTeacher = async () => {
  const result = await proxy.$api.getTeacherNo()
  let number = parseInt(result.no) + 1;
  // 给讲师编号赋值
  addTeacherForm.value.teacherNo = number.toString();

  visibleAddForm.value = true;
}
const validateForm = () => {
  return new Promise((resolve) => {
    proxy.$refs.addTeacherFormRef.validate((valid) => {
      resolve(valid);
    });
  });
};
// 提交添加讲师的表单
const addCommit = async () => {
  const valid = await validateForm()
  if (!valid) {
    ElMessage.error('请输入对应参数');
    return
  }
  await proxy.$api.addTeacher(addTeacherForm.value);
  allTeacher();
  visibleAddForm.value = false;
  ElMessage.success({message: "添加讲师成功", type: "success"});
}

// 编辑讲师信息
const commit = async () => {
  await proxy.$api.modifyTeacher(editFormData.value);
  ElMessage({message: "更新成功", type: "success"});
  allTeacher();
  visibleForm.value = false;
}

function handleSizeChange() {
}

const handleCurrentChange = (v) => {
  page.value = v;
  if (keyword.value == "") {
    allTeacher();
  } else {
    searchTeacher();
  }
}

// 根据id 删除讲师
const deleteById = async (index, row) => {
  await proxy.$api.deleteTeacherById(row.id);
  allTeacher();
  ElMessage.success({message: "删除成功", type: "success"});
}

function editById(index, row) {
  let modifyId = row.id;
  editFormData.value = row;
  visibleForm.value = true;
}

// 关键词搜索讲师
const searchTeacher = async () => {
  page.value = 1;
  const result = await proxy.$api.searchTeacher(page.value, keyword.value)
  teacherData.value = result.records
  total.value = result.total
  ElMessage.success({message: "查询成功", type: "success"});
}

// 全部讲师
const allTeacher = async () => {
  const result = await proxy.$api.allTeacherQuery(page.value)
  teacherData.value = result.records;
  total.value = result.total;
}

const handleUploadSuccess = () => {
  allTeacher();
}
</script>

<style lang="less" scoped>
.footer-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.el-input-group {
  width: 40%;
}

.header-menu {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0;
  text-align: left;
}
</style>
